<template>
	<view class="detail">
	
	<!-- 轮播 -->
	<swiper class="swiper">
		<swiper-item class="swiper-item" v-for="img in articleDetail.coverImg" :key="img">
			<image class="img" :src="img" mode=""></image>
		</swiper-item>
	</swiper>
	
	<!-- 收藏 -->
	<view class="icon">
		<image class="icons" src="../../../static/icons/collect.png" mode=""></image>
	</view>
	
	

<view class="details">
	<view class="name" v-for="item in articleDetail" :key="item.id">
		<view class="cname">
			{{ item.title }}
		</view>
		<view class="ename">
			{{ item.author }}
		</view>
		<view class="price">
			${{item.price}}
		</view>
		
		
		<!-- 富文本 -->
		<!-- 富文本 -->
		<view class="richtext">
			<rich-text :nodes="item.content1"></rich-text>
				
		</view>
		<view class="iconss">
			<view class="chat">
				<text class="text">{{ item.viewCount }}</text>
					<image class="icon-img" src="../../../static/icons/chat.png" mode=""></image>
			</view>
		<view class="collect">
				<text class="text">{{ item.viewCount }}</text>
					<image class="icon-img" src="../../../static/icons/collect.png" mode=""></image>
		</view>
		<view class="zan">
			<text class="text">{{ item.zanCount }}</text>
					
					<image class="icon-img" src="../../../static/icons/zan.png" mode=""></image>
		</view>
		</view>
	</view>
	
		
		

</view>
	
	
	</view>
</template>

<script>
	
	import findApi from "@/api/find/find.js"
	export default {
		data() {
			return {
				articleDetail:[]
			}
		},
		onLoad(val) {
			this.id = val.id
		
			this.getDetailList()
		},
		methods: {
					async getDetailList() {
							var res = await findApi.articleDetail({
								id: this.id,
							})
							this.articleDetail = this.articleDetail.concat(res.data)
							// console.log("articleDetail", res)
							// 轮播图
							if (res.data.coverImg) {
								this.articleDetail.coverImg = res.data.coverImg.split(',');
							}
							
							// sku
							if (this.articleDetail) {
								this.articleDetail.subs = res.data.subs;
							
							}
						}
							
		
		}
	}
</script>

<style lang="scss" scoped>
.detail{
	width: 100%;
	height: 100%;

	.swiper {
		width: 100%;
		height: 790rpx;
	
		.swiper-item {
			width: 750rpx;
			height: 100%;
	
			.img {
				
				width: 100%;
				height: 100%;
			}
		}
	
	}
	// 收藏
	.icon{
		width: 100rpx;
		height:100rpx;
		background-color: #354E44;
		box-shadow: 0 16rpx 24rpx 0 rgba(70,70,70,0.20);
		border-radius: 50%;
		position: absolute;
		margin-top: -50rpx;
		left: 582rpx;
		.icons{
				width: 43rpx;	
				height: 44rpx;
				margin-top: 28rpx;
				margin-left: 28.5rpx;
				}
	}
	.details{
		margin-top: 28rpx;
		
		margin: 0 34rpx 200rpx 34rpx;
	.name{
			// padding-left: 80rpx;
			padding-top: 84rpx;
			.cname{
				font-family: PingFangSC-Semibold;
				font-size: 36.4rpx;
				color: #3E3E3E;
				letter-spacing: 2.6rpx;
			}
			
			.ename{
				font-family: PingFangSC-Regular;
				font-size: 30.8rpx;
				color: #B0B0B0;
				letter-spacing: 2.2rpx;
			}
			.price{
				margin-left: 570rpx;
				font-family: PingFangSC-Regular;
				font-size: 36.4rpx;
				color: #3E3E3E;
				letter-spacing: 2.6rpx;
			}
			// 富文本
			.richtext{
				// margin: 0 auto;
				margin-top: 57rpx;
				box-sizing: border-box;
							// padding: 68rpx;
							overflow: hidden;
							// margin-bottom: 60px;
							::v-deep img {
								width: 100%;
								
							}
			}
		}
		.iconss{
			display: flex;
			position: absolute;
			// bottom: 10rpx;
			padding-top: 50rpx;
			height: 50rpx;
			// left: 0rpx;
			right: 0;
			.icon-img{
				width: 40rpx;
				height: 40rpx;
				// margin-left: 24rpx;
				padding-left: 10rpx;
			}
		
			.text{
				font-family: PingFangSC-Semibold;
				font-size: 28rpx;
				color: #3E3E3E;
				
				letter-spacing: 2rpx;
				padding-left: 40rpx;
			}
		}
	}
}
</style>
